<template>
  <movie-main>
    <div slot="mtit">
      <div class="mtitleft">
        <div class="tit">
          <a href="#"><p>猜你还爱看</p></a>
        </div>
        <div class="enter">
          <div><a href="#">热播榜</a></div>
          <div><a href="#">评分帮</a></div>
        </div>
      </div>
    </div>
    <div slot="mcarleft">
      <div class="mcar">
        <iframe src="//player.bilibili.com/player.html?aid=458512134&bvid=BV1F5411n7AU&cid=277520327&page=1" 
       scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"
       width="100%" height="100%"> </iframe>
      </div>     
    </div>
    <div slot="mcarright" class="cardright">
      <div class="card" v-for="item,index in datalist" :key="index">
        <img :src="item.imgUrl" alt="卡片" width="200px" height="300px">
        <div>
          <div class="card-min-tit">
            <a href="#">{{item.name}}</a>
            <p><strong>{{item.score}}</strong></p>
          </div>
          <p class="card-min-text">{{item.introduction}}</p>
        </div>
      </div>
     
    </div>
  </movie-main>
</template>

<script>
import {getMovieList} from '@/api/movie'
import MovieMain from './MovieMain'
export default {
  name:'MovieMainItemCartoon',
  components:{
    MovieMain
  },
  data(){
    return{
      datalist:[]
    }
  },
  created(){
    getMovieList({}).then(res=>{
      let data = res.data.data
      this.datalist = data.list.slice(0,3)
    })
  }
}
</script>

<style scoped>
  .mtitleft{
    width: 350px;
    height: 80px;
    margin-left: 30px;
    display: flex;
    justify-content: space-between;
    /* background: tomato; */
  }
  .tit p{
    font-size: 30px;
    color:rgb(236, 137, 22);
    font-weight: 300;
    padding-top: 14px;
    font-weight: 600;
  }
  .tit p:hover{
    text-decoration: none;
    color: springgreen;
  }
  .enter{
    width: 170px;
    display: flex;
    justify-content:space-between;
    padding-top: 22px;
  }
  .enter div{
    width: 75px;
    height: 30px;
    background: chartreuse;
    border-radius: 15px;
    text-align: center;
    padding-top: 2px;
  }
  .mcar{
    height: 370px;
    margin-left: 30px;
  }
  .card{
    width: 200px;
    height: 370px;
    background: rgb(233, 233, 232);
  }
  .card-min-tit{
    height: 35px;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
  }
  .card-min-tit a{
    color: #000;
  }
  .card-min-tit a:hover{
    color: rgb(16, 212, 75);
  }
  .card-min-tit p{
    color: rgb(220, 33, 20);
  }
  .card-min-text{
    height: 35px;
    padding: 0 10px;
  }
  .cardright{
    display: flex;
    justify-content: space-evenly;
  }
</style>